<template>
	<view>
		<view class="cell">
			<view class="cell-title">房号</view>
			<view class="cell-content">{{room}}</view>
		</view>
		<view class="cell">
			<view class="cell-title">时间范围</view>
			<view class="cell-content">{{post.startTime | month}} —— {{post.endTime | month}}</view>
		</view>
		<view class="horizontal" style="justify-content: space-evenly;">
			<view class="vertical">
				<view style="color: #007AFF;font-size: 50rpx;">{{get.totalWaterNum || 0}}吨</view>
				<view>总用水量</view>
			</view>
			<view class="vertical">
				<view style="color: #DD524D;font-size: 50rpx;">￥{{get.totalWaterNum || 0}}</view>
				<view>总费用</view>
			</view>
		</view>
		<block v-if="get.orderList.list.length>0">
			<navigator :url="`../detail/detail?id=${order.id}`" v-for="(order, idx) in get.orderList.list" :key="idx">
				<view class="litem">
					<view class="horizontal">
						<view class="date">{{order.billsDate | month}}</view>
						<view class="status" :style="{backgroundColor: ['#DD524D', '#0DB07C'][order.status]}">{{['未缴', '已缴',][order.status]}}</view>
					</view>
					<view class="gst">本次读数：{{order.currentNum}}</view>
					<view class="horizontal">
						<view class="gst">用水量：{{order.waterNum}}L</view>
						<view class="gst">应缴金额：<text style="font-size: large;color: red;font-weight: bold;">￥{{order.price}}</text></view>
					</view>
				</view>
			</navigator>
		</block>
		<view class="vertical" v-else-if="get.orderList.total===0" style="margin-top: 200rpx;">
			<image src="../../static/icons/empty.png" mode="widthFix" style="width: 150rpx;"></image>
			<view class="gst">没有查到用水记录~~</view>
		</view>
	</view>
</template>

<script>
	import hgCell from '@/components/hg-cell/hg-cell.vue'
	import hgHr from '@/components/hg-hr/hg-hr.vue'
	
	const app = getApp()
	
	export default {
		components:{
			hgCell, hgHr, 
		},
		filters:{
			month(date){
				return new Date(date).format('yyyy-MM')
			}
		},
		data() {
			return {
				post:{
					roomId: '',
					startTime: '',
					endTime: '',
				},
				room:'',
				get: {
					totalWaterNum: 0,	
					totalMoney: 0,	
					orderList:{
						pageNum: 1,  	// 当前页数
						pageSize: 10, 	// 当前页数量(
						totalPage: -1, 	// 总页数
						total: -1, 		// 总记录数
						list:[
							
						]
					},
				}
			}
		},
		onLoad(opts) {
			this.post.roomId = opts.roomId
			this.post.startTime = opts.startTime
			this.post.endTime = opts.endTime
			this.room = opts.room
			uni.showLoading({
				title:'查询中...'
			})
			// 拉取新的数据
			this.getFees()
		},
		onReachBottom(){
			if(this.get.orderList.list.length<this.get.orderList.total){
				// 拉取新的数据
				this.getFees()
			}
		},
		methods: {
			getFees(){
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.curl + 'order',
					method: 'GET',
					data: {
						page: 1,
						size: 10,
						...this.post,
					},
					success: res => {
						const {data} = res
						console.log(data)
						uni.hideLoading()
						if(data.code==200){
							this.get.totalWaterNum = data.data.totalWaterNum || 0
							this.get.totalMoney = data.data.totalMoney || 0
							this.get.orderList.total = data.data.orderList.total
							this.get.orderList.totalPage = data.data.orderList.totalPage
							this.get.orderList.list.push(...data.data.orderList.list)
						}else if(data.code==500){
							uni.showToast({
								icon: 'none',
								title: data.message,
							});
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			goDetail(evt, id){
				uni.navigateTo({
					url:`../detail/detail?id=${id}`
				});
			},
		}
	}
</script>

<style scoped>
	.status{
		border-radius: 999em;
		font-size: small;
		padding: 5rpx 20rpx;
		color: white;
	}
	
	.date{
		font-size: large;
		font-family: Alibaba PuHuiTi;
		color: #333333;
		font-weight: bold;
	}

</style>
